import React from 'react'
import styled from 'styled-components'
import { HiArrowNarrowRight } from 'react-icons/hi'
import avatarImage from '../assets/avatarImage.jpeg'
import { cardStyles } from './ReusableStyles'

export default function Transfers() {
  const transactions = [
    {
      image: avatarImage,
      name: '收款 张*敬',
      time: '今日 16:36',
      amount: '+$50',
    },
    {
      image: avatarImage,
      name: '付款 有家便利店',
      time: '今日 08:49',
      amount: '-$25',
    },
    {
      image: avatarImage,
      name: '收款 卢*涵.',
      time: '昨日 14:36',
      amount: '+$150',
    },
  ]
  return (
    <Section>
      <div className='title'>
        <h2>个人收支情况</h2>
      </div>
      <div className='transactions'>
        {transactions.map((transaction) => (
          <div className='transaction' key={transaction.time}>
            <div className='transaction__title'>
              <div className='transaction__title__image'>
                <img src={transaction.image} alt='' />
              </div>
              <div className='transaction__title__details'>
                <h3>{transaction.name}</h3>
                <h5>{transaction.time}</h5>
              </div>
            </div>
            <div className='transaction__amount'>
              <span>{transaction.amount}</span>
            </div>
          </div>
        ))}
      </div>
      <a className='view' href='#'>
        查看全部 <HiArrowNarrowRight />
      </a>
    </Section>
  )
}

const Section = styled.section`
  ${cardStyles}
  display: flex;
  flex-direction: column;
  gap: 1rem;
  .title {
    h2 {
      color: #ffc107;
      letter-spacing: 0.3rem;
    }
  }
  .transaction {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 1rem;
    &__title {
      display: flex;
      gap: 1rem;
      &__image {
        img {
          height: 2.5rem;
          border-radius: 50%;
        }
      }
      &__details {
        h5 {
          margin-top: 0.2rem;
        }
      }
    }
    &__amount {
      background-color: #d7e41e1d;
      padding: 0.2rem 0.5rem;
      width: 4rem;
      border-radius: 1rem;
      text-align: center;
      transition: 0.4s ease-in-out;
      &:hover {
        background-color: #ffc107;
        span {
          color: black;
        }
      }
      span {
        color: #ffc107;
      }
    }
  }
  .view {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-decoration: none;
    color: #ffc107;
    font-weight: bold;
    margin-top: 1rem;
    gap: 0.5rem;
    svg {
      transition: 0.3s ease-in-out;
      font-size: 1.4rem;
    }
    &:hover {
      svg {
        transform: translateX(0.5rem);
      }
    }
  }
`
